import React, { useEffect, useState } from "react";
import Top from "./Top/index";
import Chat from "./Chat/Index";
import MenuItem from "./MenuItem/index";
import "./index.css";
import { getMyInfo } from "@/api/userAPi";
import { Modal } from "antd";
import { useNavigate } from "react-router-dom";
const Index: React.FC = () => {
  const [menuIndex, setMenuIndex] = useState<number>(0);
  const [modalState, setModalState] = useState(true);
  const [show, setShow] = useState<boolean>(true);
  const navigation = useNavigate();
  useEffect(() => {
    if (!show) {
      getMyInfo().then((result) => {
        localStorage.setItem("user_id", result.data?.user.user_id);
      });
    }
  }, [show]);

  return (
    <>
      {show ? (
        <Modal
          visible={modalState}
          centered={true}
          maskClosable={false}
          title={"欢迎光临"}
          wrapClassName={"index-modal"}
          width={"420px"}
          okText={"进入房间"}
          onOk={() => {
            setModalState(false);
            setShow(false);
          }}
          onCancel={() => {
            navigation("/login");
          }}
          style={{ border: "4px", borderRadius: "#ebeef5" }}
        >
          进入房间后自动播放音乐
        </Modal>
      ) : (
        <div className={"room-box"}>
          <Top setMenuIndex={setMenuIndex} />
          <Chat setMenuIndex={setMenuIndex} />
          <MenuItem menuIndex={menuIndex} />
        </div>
      )}
    </>
  );
};
export default Index;
